import React, {Component} from 'react';

class Filed extends Component {
    render() {
        return <div>
            {this.props.label}
            <input type={this.props.type}
                   value={this.props.value}
                   onChange={event =>
                       this.props.changeValue(event.target.value)}
            />
        </div>
    }
}


class App extends Component {
    state = {
        name: 'fff',
        password: 'sss'
    }

    render() {
        return <div>
            <Filed value={this.state.name} label="用户名" type="text"
                   changeValue={value => this.setState({name: value})}/>
            <Filed value={this.state.password} label="密码" type="password"
                   changeValue={value => this.setState({password: value})}/>
            <button onClick={() => console.log(this.state.name, this.state.password)}>登录</button>
            <button onClick={() => this.setState({name: '', password: ''})}>重置</button>
        </div>;
    }
}

export default App;